<template>
  <div class="">
    <p>{{ record.urgePayStatusName || '已催缴' }}</p>
    <!-- 催缴说明 -->
    <div class="urge-list" v-if="urgePayDescListShow">{{ urgePayDescListShow }}</div>
    <a v-if="record.urgePayStatus == 1" @click="viewCallRecord" class="view_record-style">催缴记录</a>
  </div>
</template>
<script setup>
  import { computed } from 'vue'
  const props = defineProps({
    record: Object,
  })
  const emits = defineEmits(['viewCallRecord'])

  // 催缴说明
  const urgePayDescListShow = computed(() => {
    let text = ''
    // 催缴说明
    // 过滤 null
    const urgePayDescList = props.record.urgePayDescList?.filter((desc) => desc)
    if (urgePayDescList && urgePayDescList.length) {
      // 将催缴说明拼接成字符串
      const handledUrgePayDescList = urgePayDescList.map((desc) => {
        if (desc.length > 50) {
          return desc.slice(0, 50) + '...'
        } else {
          return desc
        }
      })
      // 按分号拼接
      text = handledUrgePayDescList.join('；')
    } else {
      text = ''
    }
    return text
  })

  const viewCallRecord = () => {
    emits('viewCallRecord')
  }
</script>
<style lang="less" scoped>
  .view_record-style {
    white-space: nowrap;
    cursor: pointer;
    color: rgb(24, 144, 255);
  }
</style>
